import React, { useState } from 'react';
import {
    Button,
    Form,
    Input,
    InputNumber,
    Checkbox,
    Row,
    Radio,
    Modal,
} from 'antd';


const ModalAddFrom2 = () => {
    const [form] = Form.useForm();
    const [open, setOpen] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);
    const handleAdd = () => {
        setOpen(true);
    }
    const handleCancel = () => {
        setOpen(false);
    }

    const handleOk = () => {
        form.validateFields().then(value => {
            setConfirmLoading(true);
            console.log("handleOk -> fieldsValue :", value)
            //确定按钮加载效果
            setTimeout(() => {
                setConfirmLoading(false);
                setOpen(false);
                form.resetFields();
            }, 3000);
        });
    }

    // 或采用异步
    // const handleOk2 = async () => {
    //     const fieldsValue = await form.validateFields(); // fieldsValue即为表单内的值
    //     form.resetFields();  
    //     console.log("handleOk -> fieldsValue", fieldsValue)
    // }

    const onFill = () => {
        form.setFieldsValue({
            name: 'Hello 小白!',
            age: 22,
            radioGroup: '专科',
            checkboxGroup: ['购物', '打游戏', '上网']
        });
    };

    return (
        <>
            <h3>Hooks:onOk():获取from表单数据</h3>
            <Button onClick={onFill}>
                Loding From data
            </Button>

            <Button onClick={handleAdd}>
                Add a row
            </Button>

            <Modal title="添加2" open={open} onOk={handleOk} onCancel={handleCancel} confirmLoading={confirmLoading}>
                <Form form={form} name="userForm" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>

                    <Form.Item name="name" label="名称" rules={[{ required: true, },]} >
                        <Input />
                    </Form.Item>

                    <Form.Item name="checkboxGroup" label="多选">
                        <Checkbox.Group>
                            <Row>
                                <Checkbox value="上网" style={{ lineHeight: '32px' }} > 上网 </Checkbox>
                                <Checkbox value="打游戏" style={{ lineHeight: '32px' }} >  打游戏 </Checkbox>
                                <Checkbox value="购物" style={{ lineHeight: '32px' }} > 购物 </Checkbox>
                                <Checkbox value="运动" style={{ lineHeight: '32px' }} > 运动 </Checkbox>
                            </Row>
                        </Checkbox.Group>
                    </Form.Item>

                    <Form.Item name="radioGroup" label="学历">
                        <Radio.Group>
                            <Radio value="专科">专科</Radio>
                            <Radio value="本科">本科</Radio>
                            <Radio value="硕士">硕士</Radio>
                        </Radio.Group>
                    </Form.Item>

                    <Form.Item name="age" label="年龄" rules={[{ required: true, },]} >
                        <InputNumber />
                    </Form.Item>

                </Form>
            </Modal>
        </>

    );
};

export default ModalAddFrom2;